<template>
  <Layout class="layout-100">
     <Header class="header-cont main__title--top">选择风险调度岗人员</Header>

    <Content class="content-cont">
      <Layout class="layout-100">
        <Sider width="300"
               class="tree-box">
          <Tree :data="tree"
                @on-select-change="changeSelect"
                class="tree"></Tree>
        </Sider>
        <Content class="table-box">
          <Table border
                 :columns="columns"
                 :data="personList"
                 class="scroll-bar"></Table>
          <Page class="tab-page pagination"
                :page-size-opts="this.page.opts"
                :total="page.total"
                :current="page.current"
                :page-size="page.pageSize"
                show-elevator
                show-sizer
                show-total
                @on-change="pageChange"
                @on-page-size-change="sizeChange"
                prev-text="<上一页"
                next-text="下一页>">

          </Page>
        </Content>
      </Layout>
    </Content>
    <Footer class="footer-cont"
            v-show="false">
      <Button @click="closetab(0)">取消</Button>
    </Footer>
  </Layout>

</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'dispatch-post-add',
  data() {
    return {
      tree: [],
      searchParams: {},
      personList: [],
      treeActive: [],
      postList: [], //职务
      list: [],
      columns: [
        {
          title: '序号',
          type: 'index', //序号
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                props: {
                  type: 'text',
                  title: params.row.name,
                  class: 'button-class'
                },
                style: {
                  color: '#0099ff',
                  padding: '0 5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.save(params.row)
                  }
                }
              },
              params.row.name
            )
          }
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center'
        },
        {
          title: '职务',
          align: 'center',
          key: 'postName'
        }
      ],
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0,
        opts: [10, 20, 50, 100]
      }
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    closeTab() {
      this.closeTag({
        name: 'dispatch-post-add',
        params: this.$route.params
      })
    },
    //获取树
    getTree() {
      this.$api.measurePlan.getTree().then(res => {
        if (res.code == 200) {
          this.tree = res.data
          this.getProPersonList(res.data)
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    getProPersonList(data) {
      if (data.length > 0) {
        this.treeActive = data
        let params = {
          currentPage: this.page.current,
          pageSize: this.page.pageSize,
          whereMap: {}
        }
        params.whereMap = this.searchParams
        if (
          data[0].type == 4 ||
          data[0].type == 8 ||
          data[0].type == 1 ||
          data[0].type == 5
        ) {
          params.whereMap.searchType = 1
        } else {
          params.whereMap.searchType = 2
        }

        params.whereMap.deptId = data[0].objectId
        if (params.whereMap.searchType) {
          this.$api.ProjectPerson.getProPersonList(params).then(res => {
            if (res.code === 200) {
              this.personList = res.data.resultObject
              this.page.total = res.data.totalRecord
              this.page.totalPage = res.data.totalPages
            } else {
              this.$Message.error(res.data.data)
            }
          })
        }
      } else {
        this.personList = []
      }
    },
    changeSelect(data) {
      this.page.current = 1
      this.getProPersonList(data)
    },
    pageChange(current) {
      this.page.current = current
      this.getProPersonList(this.treeActive)
    },
    sizeChange(size) {
      this.page.pageSize = size
      this.getProPersonList(this.treeActive)
    },
    // closetab(code, index) {
    //   this.$emit('func', code)
    // },
    save(row) {
      //点击用户名保存
      let id = row.personUserOrgId
      this.$api.disPathch.add(id).then(res => {
        if (res.code == 200) {
          this.closeTab()
          let route = {
            name: 'dispatch-post'
          }
          this.$router.push(route)
        } else {
          this.$Message.warning(res.message)
        }
      })
    }
  },
  created() {
    this.getTree()
  }
}
</script>
<style>
.tree-box {
  background-color: #ffffff;
  border: 1px solid #dcdee2;
}
.table-box {
  background-color: #ffffff;
  margin-left: 20px;
  border: 1px solid #dcdee2;
}
.tree {
  width: 250px;
  margin-left: 20px;
  margin-top: 15px;
  overflow: auto;
  height: 600px;
}
.checkPersonType {
  margin-bottom: 40px;
}
</style>